import { Directive, ElementRef, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core';
//Controls
import { AmChartsService } from "@amcharts/amcharts3-angular";

@Directive({
    selector: '[incident-scatterChart]',
})
export class IncidentScatterChartDirective implements OnInit, OnDestroy {
    private chart: any;
    private _chartData: any[] = [];
    private _peersList: any[];
    private _legendData: any[] = [];

    @Input() chartID: string;
    @Input() bulletLabel: boolean;
    @Input() dateAxis: boolean = false;
    @Input() startDate: string;

    @Input() currentColor = '#000000';
    @Input() currentSize = 12;
    @Input() currentAlpha = 1;
    @Input() otherColor = '';
    @Input() otherSize = 8;
    @Input() otherAlpha = 1;
    @Input() axisAlpha = 0.1;
    @Input() gridAlpha = 0.1;

    @Input() set chartData(value: any[]) {
        if (value) {
            console.log('val', value);
            this._chartData = value;
            if (this.chart) {
                this.AmCharts.updateChart(this.chart, () => {
                    this.chart.dataProvider = this._chartData;
                });
            }
        }
    }

    constructor(private el: ElementRef, private AmCharts: AmChartsService, private renderer: Renderer2) { }

    ngOnInit() {
        let baloonFunc = function (graphDataItem, graph) {
            return graphDataItem.dataContext.name;
        }

        setTimeout(() => {
            let horizontalAxis = {
                id: "horizontal",
                position: "bottom",
                minimum: 0,
                maximum: 10,
                gridCount: 10,
                autoGridCount: false,
                axisAlpha: this.axisAlpha,
                gridAlpha: this.gridAlpha,
                dashLength: 0,
                tickLength: 0,
                reversed: true
            };

            horizontalAxis['type'] = 'date';
            horizontalAxis['minimumDate'] = this.startDate;
            horizontalAxis['maximumDate'] = new Date();
            horizontalAxis['centerLabels'] = true;
            horizontalAxis['labelFunction'] = function(valueText) {
                return valueText;
            };

            this.chart = this.AmCharts.makeChart(this.chartID, {
                type: "xy",
                startDuration: 0,
                marginTop: 30,
                pathToImages: './assets/img/',
                dataDateFormat: this.dateAxis ? "YYYY-MM-DD": '',
                graphs: [
                    //all
                    {
                        bullet: "round",
                        bulletSize: this.otherSize,
                        bulletAlpha: this.otherAlpha,
                        lineAlpha: 0,
                        colorField: 'color',
                        xField: "X",
                        yField: "Y",
                        labelPosition: "middle",
                        balloonFunction: baloonFunc
                    }
                ],
                valueAxes: [
                    {
                        id: "vertical",
                        title: 'Score',
                        axisAlpha: this.axisAlpha,
                        minimum: 0,
                        maximum: 10,
                        gridAlpha: this.gridAlpha,
                        dashLength: 0,
                        autoGridCount: false,
                        gridCount: 10,
                        labelFunction: function(valueText) {
                            if (horizontalAxis['type'] === 'date' && valueText % 2 === 0) {
                                return valueText;
                            }

                            return '';
                        },
                        tickLength: 0
                    },
                    horizontalAxis
                ],
                dataProvider: this._chartData,
                listeners: [{
                    event: "rendered",
                    method: function(e) {
                        if(e.chart.dataDateFormat != '')
                        {
                            let startZoom = new Date();
                            startZoom.setFullYear(startZoom.getFullYear() - 3);
                            //horizontal axis
                            e.chart.valueAxes[1].zoomToValues(startZoom, new Date());
                        }
                   }
                }]
            });
        });
    }

    ngOnDestroy() {
        this.AmCharts.destroyChart(this.chart);
    }
}